<template>
  <el-card>
    <el-descriptions
      class="margin-top"
      title="用户信息详情收集"
      :column="3"
      :size="size"
      border
    >
      <template slot="extra">
        <el-button type="primary" size="small" @click="add()">保存</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          用户名
        </template>
        <input style="border: 0px" v-model="userInfo.labelInfo" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          手机号
        </template>
        <input style="border: 0px" v-model="userInfo.mobilePhoneNumber" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          居住地
        </template>
        <input style="border: 0px" v-model="userInfo.labelInfo" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          学历
        </template>
        <input style="border: 0px" v-model="userInfo.degree" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          年龄
        </template>
        <input style="border: 0px" v-model="userInfo.age" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          婚姻状况
        </template>
        <input style="border: 0px" v-model="userInfo.maritaStatus" />
      </el-descriptions-item>
    </el-descriptions>

    <el-divider></el-divider>
    <el-form :model="form">
      <el-row>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <el-form-item label="居住情况" :label-width="formLabelWidth">
              <el-input v-model="userInfo.residence"> </el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <el-form-item label="现居地址" :label-width="formLabelWidth">
              <el-input v-model="userInfo.currentPlaceOfResidence"> </el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <el-form-item label="详细地址" :label-width="formLabelWidth">
              <el-input v-model="userInfo.detailedAddress"> </el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <el-form-item label="居住时长" :label-width="formLabelWidth">
              <el-input v-model="userInfo.currentLengthOfResidence"> </el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <el-form-item label="住宅电话" :label-width="formLabelWidth">
              <el-input v-model="userInfo.workPhone"> </el-input>
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <el-form-item label="直系亲属姓名" :label-width="formLabelWidth">
              <el-input v-model="userInfo.nameOfImmediateRelative"> </el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <el-form-item label="关系" :label-width="formLabelWidth">
              <el-input v-model="userInfo.relationship"> </el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="4"
          ><div class="grid-content bg-purple">
            <el-form-item label="移动电话" :label-width="formLabelWidth">
              <el-input v-model="userInfo.relationshipPhone"> </el-input>
            </el-form-item></div
        ></el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">
            <el-form-item label="工作时间" :label-width="formLabelWidth">
              <el-input v-model="userInfo.workingHours"> </el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="5"
          ><div class="grid-content bg-purple-dark">
            <el-form-item label="公司名称" :label-width="formLabelWidth">
              <el-input v-model="userInfo.companyName"> </el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="5"
          ><div class="grid-content bg-purple-dark">
            <el-form-item label="公司地址" :label-width="formLabelWidth">
              <el-input v-model="userInfo.companyAddress"> </el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="5"
          ><div class="grid-content bg-purple-dark">
            <el-form-item label="详细地址" :label-width="formLabelWidth">
              <el-input v-model="userInfo.detaileAddress"> </el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="5"
          ><div class="grid-content bg-purple-dark">
            <el-form-item label="公司性质" :label-width="formLabelWidth">
              <el-input v-model="userInfo.natureOfTheCompany"> </el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">
            <el-form-item label="所属行业" :label-width="formLabelWidth">
              <el-input v-model="userInfo.industry"> </el-input>
            </el-form-item></div
        ></el-col>
        <el-col :span="6"
          ><div class="grid-content bg-purple-dark">
            <el-form-item label="每月收入" :label-width="formLabelWidth">
              <el-input v-model="userInfo.monthlyIncome"> </el-input>
            </el-form-item></div
        ></el-col>
      </el-row>

      <el-divider></el-divider>
    </el-form>
    <el-divider></el-divider>
  </el-card>
</template>

<style>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
<script>
export default {
  data() {
    return {
      userInfo: {},
    };
  },
  methods: {
    add() {
      this.$axios.post("/debitinfos").then((res) => {
        if (res.data.code == 200) {
          this.$message.success("保存成功,等待审核");
        }
      });
    },
  },
};
</script>